<template>
  <div style="width: 45%; margin: 0px auto;" v-loading="loading">
    <el-card class="box-card" style="text-align: center">
      <div slot="header" class="clearfix" style="text-align: center">
    <span style="color: black;
                    font-size: 30px;
                    font-weight: 800;
                    font-family: 华文仿宋;">
                    图片上传
                </span>
      </div>
      <el-upload
          class="upload-demo"
          accept=".jpg,.jpeg,.png"
          drag
          :action="url"
          :limit="1"
          :show-file-list="true"
          :auto-upload="false"
          :on-change="uploadchange"
          multiple style="text-align: center" :on-success="handleSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">请上传舌像图<br/><em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-button type="success" round style="margin-top: 20px" @click="submit">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import bus from "@/api/index/bus.js";

export default {
  name: "UploadImage",
  data() {
    return {
      approval: true,
      question: "",
      files: [], // 复刻文件数据
      url: '', // 因为auto-upload元素，action设置为空
      loading: false
    }
  },
  mounted() {
    // 事件监听 并给Bus实例初始化一个属性
    console.log(bus.sendData)
    this.question = bus.sendData
  },
  beforeDestroy() {
    bus.$off('question');
  },
  methods: {
    uploadchange(file) {
      const isSize = file.size / 1024 / 1024 < 5;
      if (!isSize) {
        this.$message.error('上传图片大小不能超过 5MB!');
        return false;
      }
      // 格式无误后，预览文件处理
      // this.imgSaveToUrl(file)
      // 复刻文件信息
      this.files = file.raw
      return true;
    },
    handleSuccess() {
      this.approval = false;
    },
    submit() {
      this.loading = true;
      this.jump();
    },
    // 获取选中图片的预览路径，并赋值给本地img路径，在前端展示
    jump() {
      // 判断是否存在预览图片信息,才执行post请求
      // const loading = this.$loading({
      //   lock: true,
      //   text: '拼命加载中',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      if (this.files.length !== 0) {
        // 赋值给formData
        let formData = new FormData()
        formData.append('file', this.files)
        formData.append('question', this.question)
        // POST接口请求
        this.$axios.post('http://localhost:8000/query/', formData)
            .then((res) => {
              // console.log('成功')
              console.log(res)
              this.loading = false;
              if (res.data === '没有检测到舌头' || res.data === '没有找到相关信息') {
                this.$root.$emit("error", res.data);//点击保存后，跳转到症状描述
                this.$root.$emit("stepvalue", 4);
                return
              } else
                this.$root.$emit("error", "");
              this.$root.$emit("stepvalue", 4);
              setTimeout(() => {
                this.$router.push({
                  name: "diagnosticresult",
                  params: {
                    data: res
                  }
                })
              }, 1000)
            })
            .catch((error) => {
              console.log('失败')
              console.log(error)
              this.$root.$emit("error", error);//点击保存后，跳转到症状描述
            })
      } else {
        // 没有预览图片文件处理
        this.$message({
          message: '请选择图片!',
          type: 'error',
          duration: 1500
        })
      }

    }
  }
}
</script>

<style scoped>

</style>
